<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Custom widget in QtJambi</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, QtJambi, custom widget, Java">
<meta name="description" content="Custom widget in QtJambi">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Custom widget in QtJambi</h1>

<p>
In this part of the QtJambi programming tutorial, we will create a custom widget. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
Toolkits usually provide only the most common widgets like buttons, text widgets, sliders etc. 
No toolkit can provide all possible widgets. Programmers must create such widgets by themselves. 
They do it by using the drawing tools provided by the toolkit. There are two possibilities. 
A programmer can modify or enhance an existing widget. Or he can create a custom widget from scratch. 
</p>


<h2>The Burning widget</h2>

<p>
In the next example, we will create a custom burning widget. 
This widget can be seen in applications like Nero or K3B. The widget will be created from scratch. 
</p>

<div class="codehead">Burning.java</div>
<pre class="code">
package com.zetcode;

import com.trolltech.qt.core.QPointF;
import com.trolltech.qt.core.QRectF;
import com.trolltech.qt.gui.QBrush;
import com.trolltech.qt.gui.QColor;
import com.trolltech.qt.gui.QFont;
import com.trolltech.qt.gui.QFontMetrics;
import com.trolltech.qt.gui.QLineF;
import com.trolltech.qt.gui.QPaintEvent;
import com.trolltech.qt.gui.QPainter;
import com.trolltech.qt.gui.QWidget;


public class Burning extends QWidget {

    private final int PANEL_HEIGHT = 30;
    private final int DISTANCE = 19;
    private final int LINE_WIDTH = 5;
    private final int DIVISIONS = 10;
    private final float FULL_CAPACITY = 700f;
    private final float MAX_CAPACITY = 750f;
    private final QColor redColor = new QColor(255, 175, 175);
    private final QColor yellowColor = new QColor(255, 255, 184);

    private QWidget parent;
    private String num[] = {
        "75", "150", "225", "300",
        "375", "450", "525", "600",
        "675"
    };


    public Burning(QWidget parent) {
        super(parent);

        this.parent = parent;
        setMinimumHeight(PANEL_HEIGHT);
    }

    @Override
    protected void paintEvent(QPaintEvent event) {

        QPainter painter = new QPainter(this);
        
        drawWidget(painter);
        painter.end();
    }

    protected void drawWidget(QPainter painter) {

        JambiApp burn = (JambiApp) parent;

        float width = size().width();        
        float slid_width = burn.getCurrentWidth();
        float step = width / DIVISIONS;

        float till = (width / MAX_CAPACITY) * slid_width;
        float full = (width / MAX_CAPACITY) * FULL_CAPACITY;

        if (slid_width > FULL_CAPACITY) {

            painter.setPen(yellowColor);
            painter.setBrush(yellowColor);
            painter.drawRect(new QRectF(0, 0, full, PANEL_HEIGHT));
            painter.setPen(redColor);
            painter.setBrush(redColor);
            painter.drawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT));

        } else {
            if (slid_width > 0) {
               painter.setPen(yellowColor);
               painter.setBrush(yellowColor);
               painter.drawRect(new QRectF(0, 0, till, PANEL_HEIGHT));
            }
        }

        painter.setPen(new QColor(90, 90, 90));
        painter.setBrush(QBrush.NoBrush);
        painter.drawRect(0, 0, size().width()-1, PANEL_HEIGHT-1);

        QFont newFont = font();
        newFont.setPointSize(7);
        painter.setFont(newFont);
        
        for (int i = 1; i <= num.length; i++) {
            painter.drawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH));

            QFontMetrics metrics = new QFontMetrics(newFont);

            int w = metrics.width(num[i-1]);
            painter.drawText(new QPointF(i*step-w/2, DISTANCE), num[i-1]);

        }        
    }
}
</pre>

<p>
In this file, we create the Burning widget. 
</p>


<pre class="explanation">
public class Burning extends QWidget {
</pre>

<p>
The custom widget is based on the <b class="keyword">QWidget</b> widget. 
</p>

<pre class="explanation">
private final int PANEL_HEIGHT = 30;
private final int DISTANCE = 19;
private final int LINE_WIDTH = 5;
private final int DIVISIONS = 10;
private final float FULL_CAPACITY = 700f;
private final float MAX_CAPACITY = 750f;
</pre>

<p>
These are important constants. The <b class="keyword">PANEL_HEIGHT</b> defines the height
for the custom widget. 
The <b class="keyword">DISTANCE</b> is the distance of the numbers on the scale from the top
of their parent border. The <b class="keyword">LINE_WIDTH</b> is the vertical line width.
The <b class="keyword">DIVISIONS</b> is the number of parts of the
scale. The <b class="keyword">FULL_CAPACITY</b> is the capacity of the media. After
it is reached, overburning happens. This is visualized by a red color. 
The <b class="keyword">MAX_CAPACITY</b> is the maximum capacity of a medium. 
</p>

<pre class="explanation">
private String num[] = {
    "75", "150", "225", "300",
    "375", "450", "525", "600",
    "675"
};
</pre>

<p>
We use these numbers to build the scale of the Burning widget. 
</p>

<pre class="explanation">
@Override
protected void paintEvent(QPaintEvent event) {

    QPainter painter = new QPainter(this);
    
    drawWidget(painter);
    painter.end();
}
</pre>

<p>
The drawing of the custom widget is delegated to the <b class="keyword">drawWidget()</b> method.
</p>

<pre class="explanation">
JambiApp burn = (JambiApp) parent;
</pre>

<p>
We retrieve the reference to the parent widget. 
</p>

<pre class="explanation">
float slid_width = burn.getCurrentWidth();
</pre>

<p>
We use it to get the currently selected slider value.
</p>

<pre class="explanation">
float width = size().width();
</pre>

<p>
We get the width of the widget. The width of the custom widget is dynamic. It can be
resized by a user. 
</p>

<pre class="explanation">
float till = (width / MAX_CAPACITY) * slid_width;
float full = (width / MAX_CAPACITY) * FULL_CAPACITY;
</pre>

<p>
We use the <b class="keyword">width</b> variable to do the transformations. Between 
the values of the scale and the custom widget's measures. Note that we use floating
point values. We get greater precision in drawing. 
</p>

<pre class="explanation">
painter.setPen(redColor);
painter.setBrush(redColor);
painter.drawRect(new QRectF(full+1, 0, till-full, PANEL_HEIGHT));
</pre>

<p>
These three lines draw the red rectangle, indicating the overburning. 
</p>

<pre class="explanation">
painter.drawRect(0, 0, size().width()-1, PANEL_HEIGHT-1);
</pre>

<p>
This is the perimeter of the widget. The outside rectangle. 
</p>

<pre class="explanation">
painter.drawLine(new QLineF(i*step, 1, i*step, LINE_WIDTH));
</pre>

<p>
Here we draw the small vertical lines. 
</p>

<pre class="explanation">
int w = metrics.width(num[i-1]);
painter.drawText(new QPointF(i*step-w/2, 19), num[i-1]);
</pre>

<p>
Here we draw the numbers of the scale. To precisely position the numbers,
we must get the width of the string. 
</p>


<pre class="code">
<div class="codehead">JambiApp.java</div>
package com.zetcode;

import com.trolltech.qt.core.Qt;
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QFrame;
import com.trolltech.qt.gui.QHBoxLayout;
import com.trolltech.qt.gui.QSlider;
import com.trolltech.qt.gui.QVBoxLayout;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * In this program, we create
 * a custom widget
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QFrame {

    private final int MAX_CAPACITY = 750;

    QSlider slider;
    QWidget widget;
    int cur_width;

    public JambiApp() {
        setWindowTitle("The Burning Widget");

        initUI();

        resize(370, 200);
        move(300, 300);
        show();
    }

    private void initUI() {
       
       slider = new QSlider(Qt.Orientation.Horizontal , this);
       slider.setMaximum(MAX_CAPACITY);
       slider.setGeometry(50, 50, 130, 30);

       slider.valueChanged.connect(this, "valueChanged(int)");

       QVBoxLayout vbox = new QVBoxLayout(this);
       QHBoxLayout hbox = new QHBoxLayout();

       vbox.addStretch(1);

       widget = new Burning(this);
       hbox.addWidget(widget, 0);

       vbox.addLayout(hbox);

       setLayout(vbox);
    }

    public void valueChanged(int val) {
        cur_width = val;
        widget.repaint();
    }

    public int getCurrentWidth() {
      return cur_width;
    }


    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}
</pre>

<p>
This is the main file. Here we create the slider widget and use our
custom widget. 
</p>

<pre class="explanation">
widget = new Burning(this);
hbox.addWidget(widget, 0);
</pre>

<p>
We create the instance of the Burning widget and add
it to the horizontal box. 
</p>

<pre class="explanation">
public void valueChanged(int val) {
    cur_width = val;
    widget.repaint();
}
</pre>

<p>
When the value of the slider changes, we store it inside the
<b class="keyword">cur_width</b> variable and repaint the custom widget. 
</p>

<pre class="explanation">
public int getCurrentWidth() {
  return cur_width;
}
</pre>

<p>
This method is called by the custom widget to get the actual slider
value. 
</p>

<br>
<img src="/img/gui/qtjambi/burning.png" alt="The Burning widget">
<div class="figure">Figure: The Burning widget</div>

<hr class="btm">

<p>
In this part of the QtJambi tutorial, we have demonstrated how to create a custom
widget. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 29, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
